import { SetStateAction, useCallback, useState,useEffect } from 'react';
// import { useMount, useRequest } from 'ahooks';
import axios from 'axios';
import {
  DatePicker, Radio, Form, Input, Row, Card, Button, message, Checkbox,
  Select, RadioChangeEvent, Collapse,Table,Space
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
// import moment from 'moment';
var count=0
const http = axios.create({
  baseURL: 'http://127.0.0.1:7001',
  timeout: 2000,
  headers: { 'X-Custom-Header': 'foobar' }
});
interface Student {
  id: number,
  name: string,
  age: number,
  sex: number,

}
interface DataType {
  id: number;
  name: string;
  age: number;
 sex: string;

}
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
  const [studentmessage,setmessage]=useState<DataType[]>()
  const[acount,setacount]=useState(0)
  const [form1] = Form.useForm();
  const studelete=(id:number)=>{
  //注意这里变量名必须为id 如果命名为stuid等则无法删除成功
  http.post('/deletestudent', {id})
  .then(function (response) {
    console.log(response);
    message.success('删除成功')
    setacount(acount+1)
  })
  .catch(function (error) {
    console.log(error);
    message.warning('删除失败')
  });
  }
  const columns: ColumnsType<DataType> = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Sex',
      dataIndex: 'sex',
      key: 'sex',
    },
    {
      title: 'Action',
      key: 'action',
      render: (student) => (
        <Space size="middle">
          {/* <a> {student.name}</a> */}
          <Button type="primary" 
          onClick={()=>{
            studelete(student.id)
            // console.log(student.id)
            }}>
              {/* onclick的花括号内必须写成（）=>否则不点击直接执行 */}
            Delete
            </Button>
        </Space>
      ),
    },
  ];
  
  //  const { run: submit1, loading: createloading1 } = useRequest(
  //   (value:Student) => {
  //     const {
  //       id,
  //       name,
  //       age,
  //       sex,

  //     } = value;

  //     return {
  //       url: "http://127.0.0.1:7001/addstudent",
  //       method: 'POST',
  //       data: {
  //         id,
  //        name,
  //        age,
  //        sex
  //       },
  //     };
  //   },
  //   {
  //     manual: true,
  //     onSuccess: () => {
  //           form1.resetFields();
  //           setButtonText1('添加');
  //          message.success('更新成功');
  //      // setFatherUpdateId('无匹配');  

  //     },
  //        onError: (error: any) => {
  //       console.log(error);
  //     }
  //     }
  // );
  const getusermessage= async()=> {
    const res = await http.get('/findallstudents') 
    console.log(res.data)
    setmessage(res.data)
  } 
  const sendmessage = (value: Student) => {
    const { id, name, sex, age } = value
    const studentValue = { id: id, name: name, sex: sex, age: age }
    console.log(studentValue)
    http.post('/addstudent', studentValue)
      .then(function (response) {
        console.log(response);
        message.success('插入成功')
        setacount(acount+1)
      })
      .catch(function (error) {
        console.log(error);
        message.warning('插入失败')
      });
  }
  useEffect(() => {
    getusermessage()
            }, [acount])
  return (
    <>
    <Form
      form={form1}
      onFinish={sendmessage}
    >
      <Card>
        <div>
          <Row>
            <Form.Item
              name="name"
              label="请输入姓名"
              rules={[{ required: false }]}
            >
              <Input style={{ width: '180px' }} />
            </Form.Item>
            <Form.Item
              name="age"
              label="请输入年龄"
              rules={[{ required: false }]}
            >
              <Input style={{ width: '80px' }} />
            </Form.Item>
          </Row>
          <Row>
            <Form.Item
              name="sex"
              label="选择性别"
              rules={[{ required: false }]}
            >
              <Radio.Group>
                <Radio value={1}>男</Radio>
                <Radio value={0}>女</Radio>
              </Radio.Group>
            </Form.Item>
          </Row>
        </div>
        <Row justify="end">
          <Form.Item>
            <Button type="primary" htmlType="submit"
            // loading={createloading1}
            >
              submmit
             
            </Button>
          </Form.Item>
        </Row>
      </Card>
    </Form>
      <Card>
      <Table columns={columns} dataSource={studentmessage} />
      <>{acount}</>
      </Card>
      </>

  )
}


